//主界面

'use strict';
import React,{Component} from 'react';
import {
  StyleSheet,
  View,
  Text,
  Image,
  Dimensions
} from 'react-native';
var {height, width} = Dimensions.get('window');
import TabNavigator from 'react-native-tab-navigator';
import ValueConfigs from '../configs/ValueConfigs';
import ImgConifg from '../configs/ImgConfig';

import HomePage1 from './HomePage';
import HomePage2 from './HomePage_2';
import HomePage3 from './HomePage_3';
import HomePage4 from './HomePage_4';



class AppMain extends Component {
  constructor(props) {
    super(props);
    this.state = {
           selectedTab:'HomePage1'
       };
  }
  render(){
    return(
      <TabNavigator>
			  <TabNavigator.Item
			  	title="主页"
			    selected={this.state.selectedTab === 'HomePage1'}
			    selectedTitleStyle={styles.selectedTextStyle}
			    titleStyle={styles.textStyle}
			    renderIcon={() => <Image source={{uri:ImgConifg.Home1Icon}} style={styles.iconStyle}/>}
			    renderSelectedIcon={() => <Image source={{uri:ImgConifg.HomeTabSelected}} style={styles.iconStyle}/>}
			    onPress={() => this.setState({ selectedTab: 'HomePage1' })}>
			    <HomePage1 {...this.props}/>
			  </TabNavigator.Item>
			  <TabNavigator.Item
			  	title="测试1"
			    selected={this.state.selectedTab === 'HomePage2'}
			    selectedTitleStyle={styles.selectedTextStyle}
			    titleStyle={styles.textStyle}
			    renderIcon={() => <Image source={{uri:ImgConifg.Home2Icon}} style={styles.iconStyle}/>}
			    renderSelectedIcon={() => <Image source={{uri:ImgConifg.HomeTabSelected}} style={styles.iconStyle}/>}
			    onPress={() => this.setState({ selectedTab: 'HomePage2' })}>
			    <HomePage2 {...this.props}/>
			  </TabNavigator.Item>
			  <TabNavigator.Item
			  	title="测试2"
			    selected={this.state.selectedTab === 'HomePage3'}
			    selectedTitleStyle={styles.selectedTextStyle}
			    titleStyle={styles.textStyle}
			    renderIcon={() => <Image source={{uri:ImgConifg.Home3Icon}} style={styles.iconStyle}/>}
			    renderSelectedIcon={() => <Image source={{uri:ImgConifg.HomeTabSelected}} style={styles.iconStyle}/>}
			    onPress={() => this.setState({ selectedTab: 'HomePage3' })}>
			    <HomePage3 {...this.props}/>
			  </TabNavigator.Item>
			  <TabNavigator.Item
			  	title="测试3"
			    selected={this.state.selectedTab === 'HomePage4'}
			    selectedTitleStyle={styles.selectedTextStyle}
			    titleStyle={styles.textStyle}
			    renderIcon={() => <Image source={{uri:ImgConifg.Home4Icon}} style={styles.iconStyle}/>}
			    renderSelectedIcon={() => <Image source={{uri:ImgConifg.HomeTabSelected}} style={styles.iconStyle}/>}
			    onPress={() => this.setState({ selectedTab: 'HomePage4' })}>
			    <HomePage4 {...this.props}/>
			  </TabNavigator.Item>
			</TabNavigator>
    );
  }
}

const styles=StyleSheet.create({
     containerStyle:{
        flex:1,
        backgroundColor:ValueConfigs.MainBackgroundColor
     },
     ADStyle:{
       height: 86,
       width:width,
       backgroundColor:'green'
     },
     iconStyle:{
        width:26,
        height:26,
     },
     textStyle:{
        color:'#999',
     },
     selectedTextStyle:{
        color:'black',
     }
});
export default AppMain;
